<template>
  <div class="loginPage page-exp">
    <pageHeader @openloginBox="openloginBox" @openRegisterBox="openRegisterBox"></pageHeader>
    <div class="bgImg">
      <div class="loginArea" v-if="isForget">
        <i class="el-icon-close" @click="closeLoginArea"></i>
        <div class="header">
          <span :class="currentIndex == 1 ? 'isActive' : ''">忘记密码</span>
        </div>
        <!-- 忘记密码 -->
        <div>
          <el-form :model="fForm" :rules="rules" ref="regForm" class="demo-ruleForm">
            <el-form-item prop="fphone">
              <el-input v-model="fForm.fphone" placeholder="请输入手机号"></el-input>
            </el-form-item>
            <el-form-item prop="fverificationCode">
              <el-input v-model="fForm.fverificationCode" placeholder="请输入验证码"></el-input>
              <el-button type="text" class="getCode" @click="fgetCode">获取验证码</el-button>
            </el-form-item>
            <el-button type="primary" @click="forgetSubmit">登录</el-button>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageHeader from "@/components/PageHeader.vue";
export default {
  name: "login",
  components: {
    pageHeader
  },
  data() {
    return {
      isForget: true,
      loginArea: true, //true登录 false注册
      currentIndex: 1,
      fForm: {
        fphone: "",
        fverificationCode: ""
      },
      rules: {
        fphone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: "blur"
          }
        ],
        fverificationCode: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    // 关闭登录注册框
    closeLoginArea() {
      this.isForget = false;
    },
    // 忘记密码登录
    forgetSubmit() {
      let that = this;
      that.$refs.regForm.validate(valid => {
        if (valid) {
          let time = new Date().valueOf();
          that
            .$http({
              url: "/wisdomlearn/user/v1/userLoginSendCode",
              method: "post",
              headers: {
                accessToken: "",
                appId: that.config.appId,
                clientId: "",
                userId: "",
                sign: that.tool.sign("/wisdomlearn/user/v1/userLoginSendCode", time),
                timestamp: time
              },
              data: {
                phone: that.fForm.fphone,
                verificationCode: that.fForm.fverificationCode
              }
            })
            .then(async res => {
              if (res && res.retCode == "00000" && res.data.accessToken) {
                await that.tool.setCookie("xinyun-front-token", res.data.accessToken);
                that.config.token = await res.data.accessToken;
                await that.getUserInfo(res.data.userId);
              }
            })
            .catch(err => {
              console.log(err);
            });
        } else {
          return false;
        }
      });
    },
    // 获取验证码
    fgetCode() {
      let that = this;
      if (that.fForm.fphone == "") {
        that.$message({
          message: "请输入手机号",
          type: "error"
        });
      } else {
        let time = new Date().valueOf();
        that
          .$http({
            url: "/wisdomlearn/sendMsg/sendMsgCode",
            method: "post",
            headers: {
              accessToken: "",
              appId: that.config.appId,
              clientId: "",
              sign: that.tool.sign("/wisdomlearn/sendMsg/sendMsgCode", time),
              timestamp: time
            },
            data: {
              phone: that.fForm.fphone
            }
          })
          .then(res => {
            if (res.retCode == "70001") {
              that.$message({
                message: res.retInfo,
                type: "error"
              });
            }
            if (res.retCode == "00000") {
              that.$message({
                message: "验证码发送成功！",
                type: "success"
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    getUserInfo(userId) {
      let that = this;
      let time = new Date().valueOf();
      that
        .$http({
          url: "/wisdomlearn/user/v1/queryuserInfo",
          method: "post",
          headers: {
            accessToken: that.config.token,
            appId: that.config.appId,
            userId: userId,
            clientId: "",
            sign: that.tool.sign("/wisdomlearn/user/v1/queryuserInfo", time),
            timestamp: time
          }
        })
        .then(res => {
          if (res && res.data && res.data.username) {
            that.tool.setCookie(
              "xinyun-front-userInfo",
              JSON.stringify({
                name: (res.data && res.data.username) || "",
                userId: userId,
                icon: res.data.pictureUrl
              })
            );
          }
          that.$message({
            message: "登录成功！",
            type: "success"
          });
          that.$router.push({
            path: "/home"
          });
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 获取验证码
    getCode() {
      let that = this;
      if (that.ruleForm.phone == "") {
        that.$message({
          message: "请输入手机号",
          type: "error"
        });
      } else {
        let time = new Date().valueOf();
        that
          .$http({
            url: "/wisdomlearn/sendMsg/sendMsgCode",
            method: "post",
            headers: {
              accessToken: "",
              appId: that.config.appId,
              clientId: "",
              sign: that.tool.sign("/wisdomlearn/sendMsg/sendMsgCode", time),
              timestamp: time
            },
            data: {
              phone: that.ruleForm.phone
            }
          })
          .then(res => {
            if (res.retCode == "70001") {
              that.$message({
                message: res.retInfo,
                type: "error"
              });
            }
          })
          .catch(err => {
            console.log(err);
          });
      }
    },
    openloginBox() {
      this.loginArea = true;
    },
    openRegisterBox() {
      this.loginArea = false;
    }
  }
};
</script>
<style scoped>
.loginPage {
  width: 100%;
  height: 100vh;
}
.bgImg {
  flex: 1;
  min-width: 1200px;
  position: relative;
  background-image: url(".././assets/img/login/bgImg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  object-fit: contain;
}
.loginArea {
  width: 400px;
  background: #fff;
  border: 1px solid #fff;
  border-radius: 23px;
  position: absolute;
  top: 50%;
  right: 50%;
  margin-top: -250px;
  margin-right: -500px;
  padding: 20px 40px;
  box-sizing: border-box;
}
.loginArea .header {
  display: flex;
  justify-content: space-evenly;
  margin-bottom: 10px;
}
.loginArea .header span {
  font-size: 24px;
  color: #161617;
  letter-spacing: 0.09px;
  cursor: pointer;
}
.header span.isActive {
  color: #1968bb;
}
.forget {
  width: 100%;
  font-size: 12px;
  color: #a5a5a5;
  letter-spacing: 0.06px;
  margin-bottom: 15px;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
.loginArea .getCode {
  color: #1968bb;
  letter-spacing: 0.08px;
  font-size: 13px;
  position: absolute;
  right: 0;
}
.loginArea .icon {
  justify-content: space-evenly;
}
.el-icon-close {
  font-size: 20px;
  display: flex;
  justify-content: flex-end;
  cursor: pointer;
}
</style>
<style>
.loginArea .el-input__inner {
  border-top: none;
  border-left: none;
  border-right: none;
  border-radius: 0;
  font-size: 13px;
  padding: 0 0 0 10px;
}
.loginArea .el-button--primary {
  width: 100%;
  height: 50px;
  font-size: 21px;
  color: #f9f9f9;
  letter-spacing: 0.08px;
  background: #1968bb;
  border-radius: 9px;
  margin: 10px 0 25px 0;
}
.loginArea .el-divider__text {
  color: #909090;
  font-size: 12px;
}
.loginArea .el-button + .el-button {
  margin-left: 0;
}
.loginArea .el-form-item {
  margin-bottom: 20px;
}
</style>
